/// 纯css实现轮播图,幻灯片；
/// $items: 轮播图数量；
/// $duration: 轮播图切换时间，如果大于1000，单位为ms，否则为s；
/// $factor: 轮播图切换时，前后图片的透明度变化因子，默认为5；
@mixin slideshow($items: 5, $duration: 5000, $factor: 5) {
  $timing: if($duration < 100, $duration * 1000, $duration);

  $overall-time: calc($timing * $items / 1000);
  $animation-name: "generated";
  $item-name: ".item-";
  @for $i from 0 to $items {
    $percent-item: calc(100 / $items * $i);
    $percent-item-next: calc(100 / $items * ($i + 1));

    $begin-hide: $percent-item - $factor;
    $end-hide: $percent-item;
    $begin-show: $percent-item-next - $factor;
    $end-show: $percent-item-next;

    @keyframes #{$animation-name + $i} {
      @if $begin-hide > 0 {
        #{"0%"} {
          opacity: 0;
        }
        #{percentage(calc($begin-hide / 100))} {
          opacity: 0;
        }
        #{percentage(calc($end-hide / 100))} {
          opacity: 1;
        }
        #{percentage(calc($begin-show / 100))} {
          opacity: 1;
        }
        #{percentage(calc($end-show / 100))} {
          opacity: 0;
        }
      }
      @if $end-show < 100 {
        #{"100%"} {
          opacity: 0;
        }
      }
    }
  }

  @for $j from 0 to $items {
    $item: $j + 1;
    #{$item-name + $item} {
      animation: #{$animation-name + $j + " " + $overall-time + "s infinite"};
    }
  }
}
